<!DOCTYPE html>
<html  lang="zh-CN"
       xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <meta name="keywords" content="商品列表" />
    <meta name="description" content="商品列表" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/public.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/swiper.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/goodslist.css}">


</head>
<body>
<div class="main goodslist">
    <div class="main_con c323232">
        <div class="bgfff top">
            <div class="pl15 pr15 flex flex-ac search">
                <img class="back mr10" th:src="@{/shoppingApi/images/back.png}">
                <p class="it1 rela inputtext">
                    <a  class="db">
                        <input type="text" placeholder="请输入搜索内容">
                    </a>
                    <img class="close abs" th:src="@{/shoppingApi/images/close.png}">
                </p>
            </div>
        </div>
        <div class="pl15 pr15 banner c323232 bgfff">
            <!--已搜索出-->
            <div class="searchout ft14">
                <ul class="flex">
                    <li class="it1 active">
                        <span>综合</span>
                    </li>
                    <li class="it1 rela default_arrow">
                        <span class="rela">价格</span>
                    </li>
                    <li class="it1">
                        <span>销量</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="line"></div>
        <ul class="goodscon overflow" th:if="${map!=null && map.productHotList!=null}">
            <li  th:each="productHot:${map.productHotList}">
                <a  class="product-detail">
                    <img class="w100"  th:attr="src=@{${'http://xlspic.ycsqd.com'+productHot.proImg}}">
                    <input type="hidden" class="productId" name="productId" th:attr="value=${productHot.proId}" >
                    <div class="bgfff pt15 pl15 pb15">
                        <p class="ft14 c323232 pover2" th:text="${productHot.proDesc}">【日晒纳米】去污护色洗衣 片 遇水即溶</p>
                        <p class="cf70029 mt10">
                            <span class="ft14">￥</span><span class="ft17 mr10"  th:text="${productHot.productPrice}">12.9</span>
                            <!--<span class="ft10 c969696">已售出2810件</span>-->
                        </p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script type="application/javascript" th:src="@{/shoppingApi/js/common.js}"></script>
<script type="application/javascript" th:src="@{/shoppingApi/js/swiper.min.js}"></script>
<script type="application/javascript">
    /*切换头部*/
    $(".searchout li").on('click',function () {
        var text = $(this).find("span").text();
        // alert("点击测试："+text);
        if(!$(this).hasClass("active")){
            $(this).siblings().removeClass("active")
            $(this).addClass("active");
            $(".default_arrow").removeClass("up_arrow");
            $(".default_arrow").removeClass("down_arrow");
        }
        if($(this).hasClass("up_arrow")){
            $(this).addClass("down_arrow")
            $(this).removeClass("up_arrow")
        }else if($(this).hasClass("default_arrow")){
            $(this).addClass("up_arrow")
            $(this).removeClass("down_arrow")
        }else{
            $(this).addClass("up_arrow")
            $(this).removeClass("down_arrow")
        }
    })
    $(".search .inputtext").on('click',function () {
        window.location.href="./search.html"
    })
    $(".search .close").on('click',function () {
        $(".search input:text").val("")
        return false
    })
    $(".back").on('click',function () {
        window.history.back(-1);
    })

    $(".w100").on("click",function () {
        var productId=$(this).siblings().val();
        console.log(productId);

        $(".product-detail").attr("href","/wap/getDetails?productId="+productId);
    //     $.ajax({
    //         url:'/wap/selectProductDetailById?productId='+productId,
    //         success:function (result) {
    //             console.log(result);
    //         }
    //     })
     })
</script>
</html>